{% extends 'base/base.html' %}
{% load my_filters %}
{% load static %}

{% block title %}
    详情
{% endblock %}
{% block css %}
    <style>
        .collect {
            float: right;
        }
    </style>
{% endblock %}

{% block js %}
    <script>
        $(".collect").click(function () {
            $.ajax({
                url: "{% url 'collect:collect' %}", // 带 pk
                method: "post",
                data: {
                    "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                    "article": {{ object.id }},
                    "user": {{ request.user.id }}
                },
                success: function (res) {
                    console.log(res)
                    if (res.msg === "收藏成功") {
                        $(".collect").attr("src", "/static/collect/collection2.png")
                        alert("收藏成功")
                    } else if (res.msg === "取消收藏成功") {
                        $(".collect").attr("src", "/static/collect/collection.png")
                        alert("取消收藏成功")
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })
    </script>
{% endblock %}

{% block main %}
    <ul class="list-group">
        <li class="list-group-item">{{ object.title }}
            {% if object|has_collected:request.user %}
                <img class="collect" src="/static/collect/collection2.png" alt="">
            {% else %}
                <img class="collect" src="/static/collect/collection.png" alt="">

            {% endif %}
        </li>

        <li class="list-group-item">{{ object.text|safe }}</li>
    </ul>
    <form action="">
    <ul class="list-group">
        <li class="list-group-item">评论

        </li>

        <li class="list-group-item">{{ form.TextInput }}</li>
    </ul>
    </form>

{% endblock %}